<template>
  <div>
    <div class="main">
      <!-- 食谱列表 -->
      <div class="img-box" @click="toCaiPuPage()">
        <img :src="pic" class="auto-img" />
      </div>
      <div class="info-box">
        <br />
        <span class="title" @click="toCaiPuPage()">{{ title }}</span>
        <br />
        <span>主要原料： {{ shicaiStr }}</span>
        <br />
        <span>
          <span class="author">{{ authorName }} </span>
          <span class="ctime">{{ ctime }} </span></span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
  },
  data() {
    return {
      pic:
        "https://i3.meishichina.com/attachment/recipe/2018/02/02/20180202151754147560613.jpg?x-oss-process=style/c320",
      title: "一个菜",
      url:
        "https://i3.meishichina.com/attachment/recipe/2018/02/02/20180202151754147560613.jpg?x-oss-process=style/c320",
      authorName: "王楷",
      authorUrl: "",
      shicai: [1, 2, 3, 4],
      ct: 1617883094,
    };
  },
  computed: {
    shicaiStr() {
      return "土豆、茄子、盐、味精、香菜";
    },
    ctime() {
      return this.$moment(new Date(this.ct * 1000)).format("YYYY-MM-DD");
    },
  },
  methods: {
    toAuthorPage() {
      //todo
      this.$router.push("/index");
    },
    toCaiPuPage() {
      //todo
      this.$router.push("/shipu/" + this.id);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 1);
  transition: 0.5s all;
  &:hover {
    border: 1px solid hotpink;
    cursor: pointer;
  }
  .img-box {
    width: 150px;
    height: 150px;
    perspective: 200px;
    overflow: hidden;
    margin-right: 30px;
    img {
      height: 100%;
      width: 100%;
      transition: 1s all;
      &:hover {
        cursor: pointer;
        transform: translateZ(20px);
      }
    }
  }
  .info-box {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    height: 150px;
    .title {
      line-height: 30px;
      font-size: 20px;
      color: #333;
      transition: all 0.2s;
      &:hover {
        color: #fabc2a;
        cursor: pointer;
      }
    }
    .author {
      line-height: 20px;
      font-size: 15px;
      color: #999;
      transition: all 0.2s;
      &:hover {
        color: #fabc2a;
        cursor: pointer;
      }
    }
    .ctime {
      color: #666;
    }
  }
}
</style>

